<template>
  <div class="Theticketlist">
    <crumbs :BreadCrumb="BreadCrumb"></crumbs>
    <div class="header-1">
      <el-table
        size="mini"
        border
        :data="orders"
        style="width: 60%"
        @filter-method="filterArr(value, row, column)"
        tooltip-effect="dark"
        
      >
        <el-table-column prop="orderId" label="订单编号" width="170">
        </el-table-column>
        <el-table-column prop="passengerName" label="姓名" width="100">
        </el-table-column>
        <el-table-column label="类型" width="60">
          <template slot-scope="scope">
            {{ scope.row.orderItemArr[0].passengerType === "adult"?"成人": scope.row.orderItemArr[0].passengerType === "children"?"儿童":"婴儿"}}
          </template>
        </el-table-column>
        <el-table-column prop="idNumber" label="证件号"> </el-table-column>
        <el-table-column
          prop="orderStatus"
          label="订单状态"
          width="150"
        >
          <template slot-scope="scope">
            {{scope.row.orderStatus | orderStatus}}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="预定日期">
        </el-table-column>
      </el-table>
    </div>

    <div class="header-1">
      <div class="titles">机票详情</div>
      <el-table
        class="thead"
        size="mini"
        border
        ref="multipleTable"
        :data="orders"
        @filter-method="filterArr(value, row, column)"
        tooltip-effect="dark"
        style="width: 100%"
        @select="handleSelectionChange"
        :header-cell-class-name="cellClass"
      >
        <el-table-column type="selection" width="45"> </el-table-column>
        <el-table-column prop="orderId" label="订单号" width="160">
        </el-table-column>
        <el-table-column prop="passengerName" label="乘客姓名" width="100">
        </el-table-column>
        <el-table-column label="起飞城市" width="120">
          <template slot-scope="scope">
            {{ scope.row.orderItemArr[0].departureCity }}
          </template>
        </el-table-column>
        <el-table-column label="到达城市" width="120">
          <template slot-scope="scope">
            {{ scope.row.orderItemArr[0].arriveCity }}
          </template>
        </el-table-column>
        <el-table-column
          :value-format="format"
          prop="departureTime"
          label="起飞时间"
          width="160"
        >
          <template slot-scope="scope">
            {{ scope.row.orderItemArr[0].departureTime }}
          </template>
        </el-table-column>
        <el-table-column prop="airliner" label="航空公司" width="120">
          <template slot-scope="scope">
            {{ scope.row.orderItemArr[0].airlinerName }}
          </template>
        </el-table-column>
        <el-table-column prop="flight" label="航班" width="100">
          <template slot-scope="scope">
            {{ scope.row.orderItemArr[0].flightNo }}
          </template>
        </el-table-column>
        <el-table-column prop="cabin" label="舱位" width="80">
          <template slot-scope="scope">
            {{ scope.row.orderItemArr[0].cabin }}
          </template>
        </el-table-column>
        <el-table-column prop="ticketNo" label="票号">
          <template slot-scope="scope">
            {{ scope.row.orderItemArr[0].ticketNo }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="header-1">
      <div class="titles">改期航班</div>
      <div class="shang">
        <el-form
          :inline="true"
          :model="formInline"
          label-width="80px"
          style="display: flex"
        >
          <el-date-picker
            size="mini"
            style="width: 200px"
            v-model="date1"
            @change="dateChange"
            type="date"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-ddTHH:mm:ss"
            placeholder="选择日期"
          >
          </el-date-picker>
          <div>
            <el-button size="mini" @click="search">查询航班</el-button>
            <!-- <el-button size="mini">手动改期</el-button>
            <el-button size="mini" @click="liebiao">选择保险</el-button> -->
          </div>
        </el-form>
      </div>
    </div>
    <!-- 中间 -->
    <!-- <div class="header-3">
      <div class="xia-1">
        <div class="xia-1-1"></div>
      </div>
      <div class="xia-2">
        <div class="xia-2-1">国航<span class="xia-2-2">MU5100</span></div>
        <div class="xia-2-3">机型：<span class="xia-2-4">333(大)</span></div>
      </div>
      <div class="xia-3">
        <div class="xia-3-1">
          <div class="xia-3-1-1">07:00</div>
          <div class="xia-3-1-2">首都T2</div>
        </div>
        <div class="xia-3-2">
          <div class="">--------------</div>
          <div class="xia-3-2-2">2h25m</div>
        </div>
        <div class="xia-3-3">
          <div class="xia-3-1-1">07:00</div>
          <div class="xia-3-1-2">首都T2</div>
        </div>
      </div>
      <div class="xia-4">
        <div>餐食：<span>有</span></div>
      </div>
      <div class="xia-5">
        <div class="xia-5-1">
          <div class="xia-5-1-1">￥<span>388</span>起（含税）</div>
          <div class="xia-5-1-2">(含保险￥748元)含套餐费</div>
        </div>
        <div class="xia-5-2">
          <el-button
            style="
              color: #fff;
              font-weight: bolder;
              background-color: #f4b53f;
              width: 70px;
            "
            size="small"
            >订票</el-button
          >
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import crumbs from "../../components/Crumbs.vue";
export default {
  components: {
    crumbs,
  },
  data() {
    return {
      format: "yyyy-MM-dd",
      tabs: [],
      flyData:{},
      BreadCrumb: [
        {
          path: "/flight/return",
          name: "退改签",
        },
        {
          path: "/reserve/endorse",
          name: "退改签详情",
        },
      ],
      orders: [],
      TripType: 1,
      BreadCrumb: [
        {
          path: "/flight/endorse",
          name: "订单改期",
        },
      ],
      formInline: {
        region: "",
        user: "",
      },
      date1: "",
      type: [],
      label: "",
      orderId: "",
      // 改期选中数组
      changeOrder: [],
    };
  },
  methods: {
    liebiao() {},
    cellClass(row){
      if (row.columnIndex === 0 && row.rowIndex === 0) {
        return 'disableheadselection'
      }
    },
    handleSelectionChange(index,row) {
      this.$refs.multipleTable.clearSelection();
      if(!this.changeOrder.length || row.passengerName != this.changeOrder[0].passengerName){
        this.changeOrder = [];
        this.$refs.multipleTable.toggleRowSelection(row);
        this.changeOrder.push(row)
      }else{
        this.changeOrder = [];
      }
    },
    filterArr(value, row, column) {
      console.log(value, row, column);
    },
    search() {
      console.log(this.orders[0].ticketNoArr.length);
      // this.ticketlist();
      console.log(this.changeOrder);
      if (!this.orders[0].ticketNoArr.length) {
        this.$confirm("抱歉,无票号无法改期", "提示", {
          confirmButtonText: "确定",
          type: "warning",
        });
      }else if (this.changeOrder.length < 1) {
        this.$confirm("请先选择改期人", "提示", {
          confirmButtonText: "确定",
          type: "warning",
        });
      } else if(!this.date1){
        this.$confirm("请选择改期时间", "提示", {
          confirmButtonText: "确定",
          type: "warning",
        });
      } else {
        console.log(this.changeOrder);
        let userList = [];
        this.changeOrder.forEach((item) => {
          let documents = {};
          documents.certificateNumcer = item.idNumber;
          let obj = {
            chineseName: item.passengerName,
            domesticPhone: item.passengerPhone,
            documents: documents,
          };
          userList.push(obj);
        });
        let time = this.date1;
        let arr = {
          orgAirport: this.changeOrder[0].orderItemArr[0].departureAirport,
          dstAirport: this.changeOrder[0].orderItemArr[0].arriveAirport,
          airline: this.changeOrder[0].orderItemArr[0].airliner,
          passengerType:this.changeOrder[0].orderItemArr[0].passengerType,
          airEquipType: this.changeOrder[0].orderItemArr[0].flightType,
          flightNo: this.changeOrder[0].orderItemArr[0].flightNo,
          departureTime: time,
          cabin: this.changeOrder[0].orderItemArr[0].cabin,
          ticketNo: this.changeOrder[0].orderItemArr[0].ticketNo,
          orderId: this.changeOrder[0].orderItemArr[0].orderId,
          depCity: this.changeOrder[0].orderItemArr[0].departureCity,
          arrivalCity: this.changeOrder[0].orderItemArr[0].arriveAirportName,
          channelType: this.flyData.ticketWay,
        };
        this.$router.push({
          name: "ticketchanging",
          params: {
            TripType: 1,
            arr: arr,
            orders: this.changeOrder,
            type: "raincheck",
            userList: userList,
          },
        });
      }
    },
    dateChange() {},
    getorderFlightDetails(id) {
      this.$axios
        .getorderFlightDetails({
          orderId: id,
        })
        .then((res) => {
          if (res.code == "00000") {
            let list = res.data.orderItemS;
            let passengerArr = [],newobj = {};
            // 数组去重
            passengerArr = list.reduce((preVal, curVal) => {
              if (!newobj[curVal.idNumber]) {
                newobj[curVal.idNumber] = "已存在";
                preVal.push({
                  passengerName: curVal.passengerName,
                  passengerType: curVal.passengerType,
                  passengerPhone: curVal.passengerPhone,
                  idNumber: curVal.idNumber,
                  ticketChangeNo: "",
                  orderItemArr: [],
                  ticketNoArr: [],
                  orderStatus: curVal.orderStatus,
                  orderId: curVal.orderId,
                  ticketAmount: 0,
                  createTime: res.data.createTime,
                  is: false,
                });
              }
              return preVal;
            }, []);
            // 重新添加订单
            list.forEach((item) => {
              passengerArr.forEach((passItem) => {
                if (item.idNumber === passItem.idNumber) {
                  passItem.ticketAmount += item.ticketAmount;
                  passItem.orderItemArr.push(item);
                  if (passItem.ticketNoArr.indexOf(item.ticketNo) == -1)
                    passItem.ticketNoArr.push(item.ticketNo);
                }
              });
            });
            passengerArr.filter((item)=>{
              if(item.orderStatus == 'outTicketSuccess') return item
            })
            this.flyData = res.data;
            this.orders = passengerArr;
          }
        });
    },
    // 查询机票
    ticketlist() {},
  },
  mounted() {
    this.orderId = this.$route.params.orderId;
    console.log(this.orders);
    this.getorderFlightDetails(this.orderId);
  },
};
</script>
<style scoped>
/deep/ .disableheadselection > .cell .el-checkbox__inner {
	display: none;
}
.Theticketlist {
  height: 100vh;
  /* background-color: #f7f7f7; */
  margin-top: 20px;
}

.header-1 {
  background-color: #fff;
  margin-bottom: 20px;
  padding-top: 10px;
  padding-left: 10px;
}

.header-2 {
  width: 800px;
  margin: auto;
  background-color: #fff;
  height: 190px;
  margin-bottom: 20px;
}

.header-3 {
  width: 800px;
  margin: auto;
  background-color: #fff;
  height: 55px;
  padding-top: 15px;
  padding-left: 10px;
  display: flex;
}

.shang {
  display: flex;
}

.shang-9 {
  margin-top: 5px;
  font-size: 12px;
  margin-left: 5px;
  margin-right: 10px;
  color: #2f80ed;
}

.block {
  margin-left: 10px;
}

.zhong-1 {
  font-size: 11px;
  display: flex;
  padding-top: 15px;
}

.zhong-1-1 {
  font-size: 11px;
  margin-right: 20px;
  margin-left: 20px;
}

.xian {
  width: 100%;
  height: 1px;
  border-bottom: 1.5px solid #e0e0e0;
  margin-top: 10px;
}

.xia-1-1 {
  width: 20px;
  height: 20px;
  background-color: #2f80ed;
  margin-right: 10px;
}

.xia-2 {
  font-size: 12px;
}

.xia-2-1 {
  font-weight: bolder;
  margin-bottom: 10px;
}

.xia-2-2 {
  font-weight: normal;
  margin-left: 5px;
}

.xia-2-4 {
  color: #4997c5;
}

.xia-3 {
  display: flex;
  margin-left: 90px;
}

.xia-3-1 {
  margin-right: 10px;
}

.xia-3-3 {
  margin-left: 10px;
}

.xia-3-1-1 {
  font-weight: bolder;
}

.xia-3-1-2 {
  font-size: 12px;
}

.xia-3-2-2 {
  margin-left: 30%;
  font-size: 12px;
  color: #817f7f;
}

.xia-4 {
  margin-left: 50px;
  font-size: 12px;
  margin-top: 10px;
  color: #bdbdbd;
}

.xia-5 {
  margin-left: 60px;
  display: flex;
}

.xia-5-1-1 {
  font-size: 14px;
  color: #f0702e;
}

.xia-5-1-1 > span {
  font-size: 23px;
}

.xia-5-1-2 {
  font-size: 9px;
}

.xia-5-2 {
  margin-left: 10px;
  margin-top: 5px;
}

thead .el-table-column--selection .cell {
  display: none;
  width: auto;
}

.el-table {
  width: auto;
}

.titles {
  line-height: 30px;
}
</style>